<template>
  <div class="header">
    <!-- 顶部栏内容 -->
    <!-- <div class="header"> -->
          <!-- 公司LOGO -->
         <!-- <img src="@/assets/img/logo.png" style="width:100px;height:48px;margin-left:66px;margin-top:19px;float:left;border-radius:30px;cursor: pointer;" @click="backhomeClick"/> -->
         <!-- 公司名称 -->
        <span class="companyName" style="margin-left:66px;color:white; font-family: FZZZHONGJW-GB1-0; font-size:32px;cursor: pointer;" @click="backhomeClick">开源数据采集系统</span>

        <!-- 导航 -->
        <span class="naviBar">
            <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" background-color="#37508D" text-color="#fff" 
            active-text-color="#FFD666" style="font-family: PingFangSC-Regular;" @select="menuClick">
                <el-menu-item index="/home">
                  <img :src="home_url" alt="">
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/dataManagement" >
                  <img :src="dataManage_url" alt="">
                  <span slot="title">数据管理</span>
                </el-menu-item>
                <el-menu-item index="/nodeManagement" >
                  <img :src="nodeManage_url" alt="">
                  <span slot="title">节点管理</span>
                </el-menu-item>
                <el-menu-item index="/taskManagement" >
                  <img :src="taskManage_url" alt="">
                  <span slot="title">任务管理</span>
                </el-menu-item>
            </el-menu>
        </span>
        <!-- 帮助按钮 -->
        <span class="helpSet" style="float:right">
          <!-- <button style="background-color:transparent;">帮助</button> -->
          <input id="pwdBtnID" type="button" @click="helpClick" value="帮助" style="margin-top:5px;background-color:transparent;border-style:none;color:white;font-size:14px;cursor:pointer;">
        </span>
        <!-- 系统设置/退出系统 -->
        <span v-if="isSystemSetting" class="accountSet" style="float:right">
          <el-tooltip effect="dark" content="系统设置" placement="bottom">
              <button style="margin-top:5px;width:18px;height:18px;background-color:transparent;border-style:none;cursor: pointer;" @click="accountSettingClick">
                  <img src='@/assets/img/设 置.png' />
              </button>
          </el-tooltip>
          <el-tooltip effect="dark" content="退出系统" placement="bottom"> 
             <button style="margin-top:5px;margin-left:15px;width:20px;height:20px;background-color:transparent;border-style:none;cursor: pointer;" @click="exitSystemClick">
                  <img src='@/assets/img/关机.png' />
              </button>
          </el-tooltip>
        </span>
        <span v-else class="accountSet" style="float:right">
          <el-tooltip effect="dark" content="退出系统" placement="bottom"> 
             <button style="margin-top:5px;margin-left:15px;width:20px;height:20px;background-color:transparent;border-style:none;cursor: pointer;" @click="exitSystemClick">
                  <img src='@/assets/img/关机.png' />
              </button>
          </el-tooltip>
        </span>
        <!-- 用户名 -->
        <span class="accountName" style="float:right;font-size:14px;color:#FFFFFF"> {{userName}} </span>
        <span class="accountHeader" style="float:right">
            <!-- <img src="@/assets/img/头像.png"  style="width:24px;border-radius:20px;margin-top: 10px;"/> -->
        </span>
    <!-- </div> -->
    
  </div>
</template>
<script>
 import home_no from '@/assets/img/首页.png'
 import home from '@/assets/img/selhome.png'
 import dataManage_no from '@/assets/img/数据管理.png'
 import dataManage from '@/assets/img/数据管理选中.png'
 import nodeManage_no from '@/assets/img/节点管理.png'
 import nodeManage from '@/assets/img/节点管理选中.png'
 import taskManage_no from '@/assets/img/任务管理.png'
 import taskManage from '@/assets/img/任务管理选中.png'
export default {
  data() {
    return {
      activeIndex: this.$route.path,
      home_url: home,
      dataManage_url: dataManage_no,
      nodeManage_url: nodeManage_no,
      taskManage_url: taskManage_no,
      eq: "", //当前选中菜单的下标
      userName:'',
      isSystemSetting: false,
      userRightArr: [],
    };
  },
  methods:{
    getData() {
      this.userName = sessionStorage.getItem('user');
      console.log(sessionStorage.getItem('user'));
      this.$api.user.findUserRight(sessionStorage.getItem('userId')).then((res) => {
        // console.log("用户权限1111：", res);
        this.isSystemSetting = this.$api.common.isArrContainStr(res.data, 'kysj:system:edit')
      })
    },
    menuClick(index) {
      console.log(index);
      if(index==11) {
         this.home_url = home_no
         this.dataManage_url = dataManage_no
         this.nodeManage_url = nodeManage_no
         this.taskManage_url = taskManage_no
      } else {
        this.eq = index//存储下标
        if(index == '/home') {
          this.home_url = home
        } else {
          this.home_url = home_no
        }

        if(index == '/dataManagement') {
          this.dataManage_url = dataManage
        } else {
          this.dataManage_url = dataManage_no
        }

        if(index == '/nodeManagement') {
          this.nodeManage_url = nodeManage
        } else {
          this.nodeManage_url = nodeManage_no
        }

        if(index == '/taskManagement') {
          this.taskManage_url = taskManage
        } else {
          this.taskManage_url = taskManage_no
        }
      }
    },
    backhomeClick() {
      this.activeIndex = '/home'
      if (this.activeIndex == '/home' || this.activeIndex == '/dataManagement' || this.activeIndex == '/nodeManagement' || this.activeIndex == '/taskManagement') {
        this.$router.replace('/home')
        this.menuClick('/home')
      }
    },
    // 系统设置
    accountSettingClick() {
      // 调整新页面
      let abstracthref = this.$router.resolve({
        path: "/userManage",
        query: {}
      });
      window.open(abstracthref.href, "_blank");
    },
    // 退出系统
    exitSystemClick() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    helpClick() {
      this.menuClick(11)
      this.$router.push('/help')
    },
  },
  created() {
    console.log(this.activeIndex);
    this.menuClick(this.activeIndex)
  },
  mounted(){
    this.getData()
  },
  watch:{
    '$route'(to,from){
      this.activeIndex=to.path
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 80px;
  // margin-bottom: 40px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #37508D;
  background-color: #37508D;
  box-shadow: 0 2px 4px 0 #A2BDFF;
  

  .companyName{
    margin-left: 15px;
    height: 80px;
    line-height: 80px;
    width: 350px;
    float: left;
    // background-color: chocolate;
  }

  .naviBar {
    // margin-top: 5px;
    height: 75px;
    line-height: 75px;
    width: 700px;
    .el-menu-demo {
      margin-left: 130px;
        width: 600px;
        height: 61px;
        margin-top: 15px;
        float: left;
        border-bottom-color:#37508D!important;
        .el-menu-item {
          // color: #b7becb !important;
          border-bottom-color:#37508D!important;
          font-size: 18px;
        }
    }
  }

  .helpSet {
    margin-right: 40px;
    margin-top: 5px;
  }

  .accountSet {
    margin-right: 20px;
    margin-top: 5px;
    // background-color: cornflowerblue;
  }

  .accountName {
    margin-top: 10px;
    margin-right: 20px;
  }

  .accountHeader {
    margin-right: 10px;
    // height: 70px;
    // line-height: 70px;
    // width: 50px;
  }
}
  
</style>